<template>
  <div class="administer">
    <div class="administerNav">
      <backHeader></backHeader>
    </div>
    <div class="administerCont">
      <div class="html_pst">
        <el-form :inline="true" class="demo-form-inline lampData">
          <div class="lampData_top">

            <!--此处第一行 -->
            <el-form-item label="设计院" class="witd wid150">
              <el-select v-model="request.senderCode">
                <el-option label="全部" value></el-option>
                <el-option
                  v-for="item in lampTypeList"
                  :label="item.orgName"
                  :value="item.orgCode"
                  :key="item.orgCode"
                ></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="灯参编号" class="witd wid150">
              <el-input v-model="request.lampparamNo"></el-input>
            </el-form-item>
            <el-form-item label="样品型号" class="witd wid150">
              <el-input v-model="request.lumModel"></el-input>
            </el-form-item>
            <el-form-item class="atuo">
              <el-button type="primary" @click="search(1)">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div class="roleControl roleControlTable">
          <el-table :data="tableData" border style="width: 100%" :max-height="tableHeight" >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="senderName" label="设计院" width="240"></el-table-column>
            <el-table-column prop="projectCode" label="项目编号"></el-table-column>
            <el-table-column prop="lampparamNo" label="灯参编号">
              <template slot-scope="scope">
                <span @click="showLampParamDetail(scope.row.lampparamId)" style="color:#208cc6">{{scope.row.lampparamNo}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lampType" label="灯具类型"></el-table-column>
            <el-table-column prop="colorTemperatureFirst" label="色温色彩"></el-table-column>
            <el-table-column prop="lampPower" label="功率（W）"></el-table-column>
            <el-table-column prop="recommendLamps.id" label="符合数据" width="240">
              <template slot-scope="scope">
                <div v-for="item in scope.row.recommendLamps" @click="contrastShow(item.id)" style="color:#208cc6">
                  样品编号： {{item.posCode}}
                  样品型号： {{item.lumModel}}
                </div>
               
              </template>
            </el-table-column>
            <el-table-column prop="sendDate" label="推送时间">
              <template slot-scope="scope">
                {{getDate(scope.row.sendDate)}}
              </template>
            </el-table-column>
          </el-table>
          <div style="padding:10px;text-align:center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="request.page"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="request.rows"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
            ></el-pagination>
          </div>
        
        <!-- 灯参编号 详情 -->
        <parameterLampDetail ref="lampParamDetail"></parameterLampDetail>
    <selectLampDetail ref="detail"></selectLampDetail>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backHeader from "@/views/common/backHeader.vue";
import parameterLampDetail from '@/views/component/parameterLampDetail.vue'
import selectLampDetail from '@/views/component/selectLampDetail.vue'
export default {
  data() {
    return {
      tableHeight :50,
      currentTab:1,
      request: {
        // colorTemperatureFirst: "",
        // lampPowerMax: '',
        // lampPowerMin:'',
        // lampType: "",
        lampparamNo: "",
        lumModel: "",
        senderName:'',
        page: 1,
        rows: 20,
        // senderCode: "",
        // workVoltage: ""
      },
      totalCount: 0,
      tableData: [],
      lampTypeList: [],
    };
  },
  components:{
    backHeader,
    selectLampDetail,
    parameterLampDetail
  },
  created() {
    this.initData();
  },
  methods: {
    //灯参详情
    showLampParamDetail(id){
      this.$refs.lampParamDetail.show(id,false,'6',false)
    },
    contrastShow(id) {
      this.$refs.detail.show(id)
    },
    initData() {
      this.search(1);
      //加载设计院接口
      var self = this
      this.$http.postQueryObj("/api/organizations/json", {isOrgState:false},{orgTypeStr:"720"}, function(res) {
        if (res.success) {
          self.lampTypeList = res.data;
        }
      });
    },
    search(page) {
      let self = this;
      this.request.page = page;

      this.$http.postObj("/api/lampparams/lamps/firmPageJson", this.request, function(res) {
        if (res.success) {
          // var res = '{"success":true,"code":"0000","message":"成功","data":{"total":1,"rows":[{"recommendLamps":[{"brandName":"新大成","posCode":"18LTXDC0-FL202B-03","id":4557,"supplierCode":"200032","lumModel":"XDC-FL202-3030-12-24DC-40-3000K-C-30W-LH-RAL7046"}],"senderName":"北京清控人居光电研究院有限公司","workVoltage":"24V","projectCode":"****001","sendDate":"2019-12-02 10:01:41","controlProtocol":"","lampparamId":4879,"lampparamNo":"DHM8","senderCode":"1100","colorTemperatureFirst":"4000K","lampType":"投光灯","lampPower":72}]}}'
          // var res = JSON.parse(res)

          self.tableData = res.data.rows;
          self.totalCount = res.data.total;
        }
      });
    },
    handleCurrentChange(page) {
      this.search(page);
    },
    handleSizeChange(pageSize) {
      this.request.rows = pageSize;
      this.search(1);
    },
    getDate(date){
      if(date != null && date != ''){
        var data = new Date(date)
        return data.getFullYear() + "-" + parseInt(data.getMonth()+1) +"-"+data.getDate()
      }
    }
  },
  mounted(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 320;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - 320
            }
           
        })
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.swiper-button-white {
    background: rgba(0, 0, 0, 0.3);
    top: auto !important;
    margin-top: 0 !important;
    bottom: 0;
    height: 50px;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.contrast{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0,0,0,0.5);
    z-index: -1;
    opacity: 0;
    display: none;
    &.active{
      opacity: 1;
      z-index: 999999;
      display: block;
    }
    .contrast_cont{
        display: inline-block;
        max-width: 1100px;
        max-height: 90vh;
        width: 100%;
        padding-bottom: 10px;
        vertical-align: middle;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        font-size: 18px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        text-align: left;
        overflow: hidden;
        backface-visibility: hidden;
        padding: 0;
        .lt_rt{
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            position: relative;
            .rt_ct{
                width: 50%;
                padding: 10px 20px;
                position: relative;
                table{
                  width: 100%;
                  td{
                    font-size: 14px;
                    text-align: center;
                  }
                } 
                .el-icon-close{
                    float: right;
                   font-size: 20px;
                   cursor: pointer;
                   position: relative;
                }
                .p1{
                  font-size: 12px;
                  margin-bottom: 5px;
                }
                .cont{
                    position: relative;
                    margin-top: 18px;
                     .set{
                         position: absolute;
                         text-align: right;
                         right: 0;
                         top: 70px;
                         color: #333333;
                     }
                    .xian{
                        color: #333333;
                        position: relative;
                        padding: 0px 0 6px;
                        border-bottom: 2px solid #eeeeee;
                        span{
                            position: absolute;
                            right: 0;
                            top: 0;
                            font-size: 14px;
                            cursor: pointer;
                        }
                        .xian_rt{
                            float: right;
                            font-size: 14px;
                             position: absolute;
                            right: 0;
                            top: 0;
                            span{
                                position: initial;
                                color: #208cc6;
                            }
                        }
                    }
                    ul{
                        margin: 1rem 0 2rem;
                        position: relative;
                        li{
                            width: 50%;
                            display: inline-block;
                            font-size: 12px;
                            margin-bottom: 2px;
                            color: #333333;
                            line-height: 1em;
                            margin-right: 0;
                            span:first-child{
                                color: #000;
                                font-weight: bold
                            }
                            span{
                              span{
                                color: #333333 !important;
                                font-weight: 500 !important
                              }
                            }
                        }
                    }
                }
                .bottm{
                    text-align: center;
                        margin-top: 20px;
                    button{
                        background-color: #eeeeee;
                        font-size: 12px;
                            padding: 7px 15px;
                    }

                }   
            }
            .lt_ct{
                width: 50%;
                background-color: #f8f8f8;
                padding: 20px;
                position: relative;
                .top{
                    margin-bottom: 15px;
                    span{
                        color: #666666;
                        margin-right: 12px;
                        &:nth-child(1),&:nth-child(3){
                            color: #208cc6;
                        }
                        &:last-child{
                            float: right;
                            font-size: 12px;
                            margin-right:0;
                            img{
                                position: relative;
                                top: 2px;
                                margin-right: 5px;
                                display: inline-block;
                            }
                        }
                    }
                }
                .cents{
                  position: relative;
                  .cents_s{
                    height: 44vh;
                  }
                    .cout_list{
                      height: 100%;
                      .gallery-thumbs-box,.swiper-container,.swiper-wrapper{
                        height: 100%;
                      }
                      .swiper-slide{
                        height: 100%;
                      }
                        img{
                           max-height: 44vh;
                        }
                    }
                    .cent_ss{
                        overflow: auto;
                        margin-top: 16px;
                        padding: 0 38px;
                        li{
                            display: inline-block;
                            border-radius: 4px;
                            overflow: hidden;
                            margin-right: 10px;
                        }
                    }
                }
                .bom{
                    margin-top: 20px;
                    text-align: center;
                }
            }
        }
    }
}
.dee {
  height: 70vh;
  .el-dialog__body{

    height:93%;
    
  }
}
.power.atuo{
  margin-right: 15px !important;
}
.wid150 {
  width: 235px  !important;
  .el-form-item__content{
  width: 150px  !important;
  }
  .el-select{
    width: 150px !important;
  }
}
.witds{
  .el-input{
    .el-input__inner{
      width: 185px;
      padding: 0 30px 0 15px;
    }
  }
}
.amend{
  cursor: pointer;
}
.roleControlTable{
 height: calc(100% - 186px) !important;
 height: -webkit-calc(100% - 186px) !important;
}
.shijian{width: 320px !important;}
.wed{
  width: 110px !important;
}
.wed1{
   width: 210px !important;
}
.backuy{
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 31px;
  border-radius: 50%;
  border:1px solid #000;
  display: inline-block;
  position: relative;
  top: 7px;
  margin-right: 10px;
  cursor: pointer;
  .el-icon-back{
    font-size: 20px;
  }
}
.addcustom{
  .el-dialog__body{
    padding-top: 3px;
  }
  .el-pagination{
    text-align: center;
  }
  .dialog-footer{
    text-align: center;
    width: 100%;
    display: block;
    .el-button--primary{
      background-color: #5b65a1;
      color:#fff;
      border:none;
    }
  }
} 
.dewd{
  width: auto !important;
}
.add{
  margin-bottom: 5px;
  text-align: right;
  button:last-child{
    margin-right: 0;
  }
  span{
    cursor: pointer;
  }
  .el-button--primary{
    background-color: #5b65a1;
    color:#fff;
    border:none;
        margin-right: 10px;
  }
}
.lampData .lampData_top .el-form-item{
  width: 280px;
  margin-right: 4px;
  .el-select{
    width: 185px;
  }
  &.atuo{
    width: auto;
    margin-left: 5px;
  }
  &.shijian{
    .el-date-editor.el-input{
      width: 115px;
      &.el-input--suffix .el-input__inner{
        padding-right: 5px;
      }
    }
  }
}
.fdfefcs{
  .el-form-item__label{
    width: 97px !important;
  }
}
.lampData {
  .el-form-item {
    margin-right: 20px;
    .el-button--primary {
      background-color: #5b65a1;
      border-radius: 4px;
      border: none;
    }
  }
  .witd {
    .el-form-item__label {
      // width: 82px;
    }
  }
}
    .top{
        margin-bottom: 20px;
        
    }
    .button{
            background-color: #5b65a1;
            border-radius: 4px;
            color: #fff;
            padding: 12px 20px;
            font-size: 14px;
            border: none;
            margin-right: 20px;
            cursor: pointer;
        }
       .contrast_cont.el-message-box .bottm{
         text-align: center;
         a{
           background-color: #5b65a1;
          border-radius: 4px;
          color: #fff;
          padding: 5px 12px;
          font-size: 14px;
         }
        }
    </style>